<template>
  <el-card>
    <el-table
        :data="state.dataList"
        border style="width: 100%"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
      <el-table-column prop="name" label="参数名" header-align="center"></el-table-column>
      <el-table-column prop="info" label="参数信息" header-align="center"></el-table-column>
    </el-table>
    <el-pagination
        :current-page="state.pageNum"
        :page-sizes="state.pageSizes"
        :page-size="state.pageSize"
        :total="state.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
    >
    </el-pagination>

  </el-card>
</template>

<script setup lang="ts">
import {useCrud} from '@/hooks'
import {onMounted, reactive} from 'vue'
import {IHooksOptions} from "@/hooks/interface";

const state: IHooksOptions<any> = reactive({
  dataList: [
      {id: 1, name: 'package', info: "包名. 形如 com.mazaiting"},
      {id: 2, name: 'className', info: "类名(驼峰形式). 形如 className"},
      {id: 3, name: 'ClassName', info: "类名(帕斯卡式). 形如 ClassName"},
      {id: 4, name: 'moduleName', info: "模块名(驼峰形式). 形如 moduleName"},
      {id: 5, name: 'ModuleName', info: "模块名(帕斯卡式). 形如 ModuleName"},
      {id: 6, name: 'functionName', info: "功能名(驼峰形式). 形如 moduleName"},
      {id: 7, name: 'FunctionName', info: "功能名(帕斯卡式). 形如 FunctionName"},
      {id: 8, name: 'daoClassName', info: "DAO 层类名. 形如 IDatasourceMapper"},
      {id: 9, name: 'converterClassName', info: "converter 层类名. 形如 IDatasourceConverter"},
      {id: 10, name: 'serviceClassName', info: "service 层类名. 形如 IDatasourceService"},
      {id: 11, name: 'urlPath', info: "接口路径. 形如 gen/datasource"},
      {id: 12, name: 'packagePath', info: "包路径. 形如 com/mazaiting"},
      {id: 13, name: 'author', info: "作者. 形如 mazaiting"},
      {id: 14, name: 'datetime', info: "当前日期时间: 2023-03-26 20:00:00"},
      {id: 15, name: 'tableName', info: "表名. 形如 TEST_TABLE_NAME"},
      {id: 16, name: 'tableComment', info: "表注释. 形式 这是一张测试表"},
      {id: 17, name: 'fieldList', info: "字段列表", children: [
          {id: 1701, name: 'baseField', info: "是否为基类字段"},
          {id: 1702, name: 'fieldComment', info: "字段注释"},
          {id: 1703, name: 'autoFill', info: "自动填充规则"},
          {id: 1704, name: 'primaryKey', info: "是否为主键"},
          {id: 1705, name: 'attrType', info: "属性类型"},
          {id: 1706, name: 'attrName', info: "属性名(驼峰形式)"},
          {id: 1707, name: 'attrMethodName', info: "属性方法方法名(帕斯卡式)"},
          {id: 1708, name: 'fieldType', info: "字段类型"},
          {id: 1709, name: 'fieldName', info: "字段名"},
          {id: 1710, name: 'formType', info: "表单类型"},
          {id: 1711, name: 'formRequired', info: "是否为必输"},

        ]},
      {id: 18, name: 'baseClass', info: "父类"},
      {id: 19, name: 'importList', info: "包导入列表"},
      {id: 20, name: 'formList', info: "表单列表"},
      {id: 21, name: 'queryList', info: "查询列表"},
      {id: 22, name: 'gridList', info: "表格列表"},
  ]
})

// onMounted(() => {
//   state.total = Number(state.dataList!!.length)
// })

const {getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle} = useCrud(state)
</script>
